<template>
  <div>
    <div class="table-page-search-wrapper">
      <a-form-model :model="queryParam" layout="inline">
        <a-row :gutter="48">
          <a-col :md="6" :sm="24">
            <a-form-model-item label="拨出时间">
              <a-date-picker style="width: 100%" v-model="queryParam['filter[calltime]']" @change="onChange" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-model-item label="被叫">
              <a-input v-model="queryParam['filter[dst]']" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-model-item label="通讯账号">
              <a-select
                v-model="queryParam['filter[adviser_ax_accounts]']"
                placeholder="选择通讯账号"
              >
                <a-select-option v-for="(item,index) in accountOpts" :key="item" :value="item">{{index}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-model-item label="通时区间">
              <a-select v-model="queryParam['filter[ax_section]']" placeholder="选择对应的通时区间">
                <a-select-option v-for="(item,index) in sectionOpts" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-button type="primary" @click="$refs.table.refresh(true)" style="margin-right:10px;">查询</a-button>
            <a-button type="default" @click="resetSearch">重置</a-button>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <p></p>
    <div class="table-operator">
      <s-table
        bordered
        ref="table"
        :row-key="(record) => record.id"
        :columns="callColumns"
        :data="axData"
      >
        <div
          slot="filterDropdown"
          slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
          style="padding: 8px"
        >
          <a-input
            v-ant-ref="c => (searchInput = c)"
            :placeholder="`搜索${column.title}`"
            :value="selectedKeys[0]"
            style="width: 188px; margin-bottom: 8px; display: block;"
            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
            @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
          />
          <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
          >
            搜索
          </a-button>
          <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
            重置
          </a-button>
        </div>
        <div
          slot="filterSelect"
          slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
          style="padding: 8px"
        >
          <a-select
            show-search
            style="width: 188px; margin-bottom: 8px; display: block;"
            :placeholder="`选择${column.title}`"
            :value="selectedKeys[0]"
            :filter-option="filterOption"
            @change="(value) => setSelectedKeys(value ? [value] : [])"
            @pressEnter="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
          >
            <a-select-option v-for="(item,index) in accountOpts" :key="item" :value="item">{{index}}</a-select-option>
          </a-select>
          <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
          >
            搜索
          </a-button>
          <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
            重置
          </a-button>
        </div>
        <div
          slot="filterRange"
          slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
          style="padding: 8px"
        >
          <a-range-picker
            style="width: 228px; margin-bottom: 8px; display: block;"
            :value="createValue"
            @change="onChange0"
            @pressEnter="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
          />
          <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 110px; margin-right: 8px"
            @click="() => handleRange(selectedKeys, confirm, column.dataIndex)"
          >
            搜索
          </a-button>
          <a-button size="small" style="width: 110px" @click="() => rangeReset(clearFilters)">
            重置
          </a-button>
        </div>
        <template slot="url" slot-scope="text, record">
          <audio v-if="record.duration != 0" :src="text" controls :style="{ height: '20px', lineHeight: '20px' }">
            您的浏览器不支持 audio 标签
          </audio>
          <div v-else>
            -
          </div>
          <!--        <audio :src="text" controls></audio>-->
        </template>
<!--        <template slot="title">-->
<!--          <div :style="{ overflow: 'hidden' }">-->
<!--            <div :style="{ float: 'left' }">-->
<!--              搜索结果总通时：-->
<!--              <a-tag color="red">{{(totalZts/60).toFixed(2)}}</a-tag>-->
<!--              分钟-->
<!--            </div>-->
<!--          </div>-->
<!--        </template>-->
      </s-table>
    </div>
  </div>
</template>

<script>
  import { STable } from '@/components'
  import col from '@/columns/calls'
  import { getCallList } from '@/api/calls'

  export default {
    components: {
      STable
    },
    name: 'AxModal',
    data () {
      return {
        callColumns: col.nanfang,
        axData: parameters => {
          return getCallList(Object.assign(parameters, this.queryParam)).then(res => {
            this.sectionOpts = res.result.ax_section
            this.accountOpts = res.result.ax_account
            return res.result
          })
        },
        accountOpts: {},
        sectionOpts: {},
        queryParam: {},
        info: {},
        currentId: '',
        visible: false,
        signOpts: {},
        typeOpts: {},
        signForm: {
          question: '',
          proposal: ''
        },
        signRules: {
          question: [{ required: true, message: '请输入问题是什么', trigger: true }],
          proposal: [{ required: true, message: '请输入解决方案', trigger: true }]
        },
        totalZts: 0,
        createValue: []
      }
    },
    created () {
      this.queryParam['filter[type]'] = '4'
    },
    methods: {
      onChange (date, dateString) {
        this.queryParam['filter[calltime]'] = dateString
      },
      onChange0 (date, dateString) {
        this.createValue = date
        this.queryParam['filter[begin_created_at]'] = dateString[0]
        this.queryParam['filter[end_created_at]'] = dateString[1]
      },
      filterOption (input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },
      resetSearch () {
        this.queryParam = {}
        this.queryParam['filter[type]'] = '4'
        this.$refs.table.refresh(true)
      },
      handleSearch (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
      },
      handleReset (clearFilters, dataIndex) {
        clearFilters()
        delete this.queryParam['filter[' + dataIndex + ']']
      },
      handleSelect (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
      },
      handleRange (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.$refs.table.refresh(true)
      },
      rangeReset (clearFilters) {
        clearFilters()
        this.createValue = []
        delete this.queryParam['filter[begin_created_at]']
        delete this.queryParam['filter[end_created_at]']
        this.$refs.table.refresh(true)
      }
    }
  }
</script>

<style>
  .ant-table-tbody > tr.table-color-dust {
    background-color: #ffcccc;
  }
</style>
